import {View, Text, Button as Button2,  TextInput, TouchableOpacity, StyleSheet,PixelRatio,Alert } from 'react-native';
import { styles} from './MyStyle';
import {MyButton01} from './UiComponents';

import { useAppDispatch, useAppSelector } from './index';
import {
  decrement,
  increment,
  reset,
  incrementAsync,
  incrementByAmount,
  sayHi,
  selectCount,
  name,
} from './redux/counterSlice';

// https://redux.js.org/introduction/getting-started
// https://github.com/rahsheen/react-native-template-redux-typescript/tree/main
// npm install redux react-redux

export function Test01() {
// The `state` arg is correctly typed as `RootState` already
const count = useAppSelector(selectCount);
const name2 = useAppSelector(name);
const dispatch = useAppDispatch();
  return <View  style={
    { 
      alignItems:'center',
      flexDirection: 'row', gap :1,padding: 0,marginBottom :8 }
    }>
      {/* <Text>Redbux Demo 1</Text> */}
<MyButton01 text="+1" onPress={() => dispatch(increment())}></MyButton01>
<MyButton01 text="-1" onPress={() => dispatch(decrement())}></MyButton01>
<MyButton01 text="+12" onPress={() => dispatch(incrementByAmount(12))}></MyButton01>
<MyButton01 text="0" onPress={() => dispatch(reset())}></MyButton01>
<MyButton01 text="sayHi" onPress={() => dispatch(sayHi('Hi'))}></MyButton01>
<Text style={styles.text}>Count: {count}</Text>
<Text style={styles.text}>Name: {name2}</Text>
  </View>;
}





